<template>
	<view class="user">
		<view class="info">
			<u-avatar :src="avatar" size="60"></u-avatar>
			<view class="data">
				<view class="name">
					{{name}}
				</view>
				<view class="text">
					{{text}}
				</view>
			</view>
		</view>
		<u-gap height="20" bgColor="#fff"></u-gap>
		<view class="tips" v-if="isLogin">
			<view class="title2">
				打卡天数:{{number}}天
			</view>
			<u-button type="primary" :text="tip" :disabled="isTip" @click="setTip">
				{{tip}}
			</u-button>

		</view>
		<u-gap height="20" bgColor="#fff"></u-gap>
		<view class="exit">
			<u-button type="error" @click="toLogin" v-if="isLogin">
				退出账号
			</u-button>
			<u-button type="error" @click="toLogin" v-else>
				去登陆
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: "",
				name: "游客账户",
				text: "",
				number: 0,
				isTip: false,
				isLogin: false
			};
		},
		computed: {
			tip() {
				if (this.isTip) {
					return "已打卡"
				} else {
					return "点击打卡"
				}
			}
		},
		methods: {
			toLogin() {
				uni.clearStorageSync();
				uni.redirectTo({
					url: "../login/login"
				})
			},
			getInfo() {
				let token = uni.getStorageSync("token");
				if (token) {
					this.isLogin = true
					uni.request({
						header: {
							'content-type': 'application/json',
							"Authorization": "JWT " + token
						},
						url: "http://127.0.0.1:8000/getInfo/",
						method: "get",
						success: (res) => {
							let data = res.data
							console.log(data)
							if (data.code === 1) {
								uni.setStorageSync("info", data.data)
								let info = data.data
								this.avatar = info.avatar
								this.name = info.name
								this.text = info.text
								this.number = info.number
								this.isTip = info.isTip

							} else {

							}
						},
						fail: (err) => {
							// uni.showModal({
							// 	content: "服务器异常",
							// 	showCancel: false
							// });

						}
					})
				}

			},
			setTip() {
				let token = uni.getStorageSync("token");
				let that = this;
				if (token) {
					this.isLogin = true
					uni.request({
						header: {
							'content-type': 'application/json',
							"Authorization": "JWT " + token
						},
						url: "http://127.0.0.1:8000/tip/",
						method: "post",
						success: (res) => {
							let data = res.data
							if (data.code === 1) {
								that.isTip = true
								let info = uni.getStorageSync("info")
								info.isTip = true
								uni.setStorageSync("info", info)
								uni.showModal({
									content: "打卡成功",
									showCancel: false
								});
							} else {
								that.isTip = false
								that.number = that.number + 1
								let info = uni.getStorageSync("info")
								info.isTip = true
								info.number = that.number + 1
								uni.setStorageSync("info", info)
								uni.showModal({
									content: "今天已经打过卡了",
									showCancel: false
								});
							}
						},
						fail: (err) => {
							uni.showModal({
								content: "服务器异常",
								showCancel: false
							});

						}
					})
				}
			}
		},
		onShow() {
			// this.getInfo(),
			let info = uni.getStorageSync("info")
			if (info) {
				this.avatar = info.avatar
				this.name = info.name
				this.text = info.text
				this.number = info.number
				this.isTip = info.isTip
			} else {
				this.getInfo()
			}

		}
	}
</script>

<style lang="scss">
	.user {
		margin: 30px 50rpx;
		width: 100wh;

		.info {
			margin: 10px 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100px;
			// background-color: #eee;

			.data {
				margin-left: 50rpx;
				padding: 0 auto;

				.name {
					font-size: 50rpx;
					font-weight: bold;
				}

				.text {
					font-size: 20rpx;
					color: #808080;
				}
			}
		}

		.tips {
			.title2 {
				// background-color: #007AFF;
				font-size: 35rpx;
				margin: 10px 30rpx;
				color: #333333;
			}
		}
	}
</style>
